{% extends "base.html" %}

{% block title %}{{ post.title }} - 云水禅心居{% endblock %}

{% block extra_head %}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<script>
    // 根据CSDN文章优化：从PC（电脑）网页自适应到手机端网页
    (function() {
        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        
        if (isMobile) {
            // 获取当前视口设置
            var metaViewport = document.querySelector('meta[name="viewport"]');
            // 小屏幕手机上设置较小的缩放比例，超小屏幕使用更小的比例
            var width = window.innerWidth;
            var scale = 1.0;
            
            if (width <= 320) {
                scale = 0.8; // 超小屏幕
            } else if (width <= 375) {
                scale = 0.9; // 小屏幕
            } else if (width <= 414) {
                scale = 0.95; // 中等小屏幕
            }
            
            // 更新视口设置
            metaViewport.content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=5.0, minimum-scale=' + scale + ', user-scalable=yes';
            document.documentElement.style.setProperty('--initial-scale', scale);
            
            // 添加宽度限制防止溢出
            document.body.style.width = "100%";
            document.body.style.overflow = "hidden";
            document.body.style.overflowY = "auto";
        }
    })();
</script>
<style>
    /* 基础样式重置与盒模型 */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    body {
        width: 100%;
        overflow-x: hidden;
        color: var(--text-color);
        font-family: var(--font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
        line-height: 1.6;
        background-color: var(--background-color);
    }
    
    /* 文章容器 */
    .post-container {
        width: 100%;
        max-width: 1200px;
        margin: 1rem auto;
        padding: 0 1rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
        gap: 1.5rem;
        overflow-x: hidden;
    }
    
    /* 代码编辑器样式 */
    .code-editor {
        width: 100%;
        background-color: var(--card-bg);
        box-shadow: var(--box-shadow);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 2px;
        margin-bottom: 1rem;
        overflow: hidden;
    }
    
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
        flex-wrap: wrap;
    }
    
    .title {
        font-family: Lato, sans-serif;
        font-weight: 900;
        font-size: clamp(14px, 2vw, 18px);
        letter-spacing: 1px;
        color: var(--text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100% - 30px);
    }
    
    .editor-content {
        margin: 0 15px 15px;
        color: var(--text-color);
        overflow-wrap: break-word;
    }
    
    /* 文章元数据 */
    .post-meta {
        color: var(--secondary-color);
        font-size: 0.9rem;
        margin: 1rem 0;
        font-family: 'Courier New', monospace;
    }
    
    .post-meta-item {
        display: inline-block;
        margin-right: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .post-meta-label {
        color: var(--primary-color);
    }
    
    /* 文章正文内容 */
    .post-content {
        line-height: 1.8;
        color: var(--text-color);
        padding: 1rem 0;
        width: 100%;
        max-width: 100%;
        overflow-wrap: break-word;
    }
    
    /* 图标尺寸控制 */
    .icon, .terminal-icon {
        width: 1.2rem;
        height: 1.2rem;
        display: inline-block;
        vertical-align: middle;
    }
    
    .post-rating svg {
        width: 1.2rem;
        height: 1.2rem;
    }
    
    /* 评分区域 */
    .rating-container {
        margin-top: 1.5rem;
        padding: 1.5rem 0;
        border-top: 1px solid var(--border-color);
        width: 100%;
    }
    
    .rating-title {
        font-size: 1.2rem;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
    }
    
    .rating-info {
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    
    .post-rating {
        display: flex;
        align-items: center;
        color: var(--text-color);
        margin-right: 2rem;
    }
    
    /* 评分星星动画 */
    .rating {
        display: flex;
        flex-direction: row-reverse;
        gap: 0.3rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    .rating input {
        appearance: unset;
    }
    
    .rating label {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
    }
    
    .rating svg {
        width: 2rem;
        height: 2rem;
        overflow: visible;
        fill: transparent;
        stroke: var(--secondary-color);
        stroke-linejoin: bevel;
        stroke-dasharray: 12;
        animation: idle 4s linear infinite;
        transition: stroke 0.2s, fill 0.5s;
    }
    
    @keyframes idle {
        from {
            stroke-dashoffset: 24;
        }
    }
    
    .rating label:hover svg {
        stroke: var(--accent-color);
    }
    
    .rating input:checked ~ label svg {
        transition: 0s;
        animation: idle 4s linear infinite, yippee 0.75s backwards;
        fill: var(--accent-color);
        stroke: var(--accent-color);
        stroke-opacity: 0;
        stroke-dasharray: 0;
        stroke-linejoin: miter;
        stroke-width: 8px;
    }
    
    @keyframes yippee {
        0% {
            transform: scale(1);
            fill: var(--accent-color);
            fill-opacity: 0;
            stroke-opacity: 1;
            stroke: var(--secondary-color);
            stroke-dasharray: 10;
            stroke-width: 1px;
            stroke-linejoin: bevel;
        }

        30% {
            transform: scale(0);
            fill: var(--accent-color);
            fill-opacity: 0;
            stroke-opacity: 1;
            stroke: var(--secondary-color);
            stroke-dasharray: 10;
            stroke-width: 1px;
            stroke-linejoin: bevel;
        }

        30.1% {
            stroke: var(--accent-color);
            stroke-dasharray: 0;
            stroke-linejoin: miter;
            stroke-width: 8px;
        }

        60% {
            transform: scale(1.2);
            fill: var(--accent-color);
        }
    }
    
    .rating-submit-btn {
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .rating-submit-btn:hover {
        background-color: var(--accent-color);
    }
    
    /* 评论区域 */
    .comments-container {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--border-color);
    }
    
    .comments-title {
        font-size: 1.2rem;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
    }
    
    .comment-item {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        width: 100%;
    }
    
    .comment-header {
        margin-bottom: 0.5rem;
        flex-wrap: wrap;
    }
    
    .comment-meta {
        font-size: 0.9rem;
        color: var(--secondary-color);
    }
    
    .comment-author {
        font-weight: bold;
        margin-right: 0.5rem;
    }
    
    .comment-time {
        color: var(--secondary-color);
    }
    
    .comment-content {
        line-height: 1.6;
        margin-bottom: 0.5rem;
        word-break: break-word;
        width: 100%;
        max-width: 100%;
        color: var(--text-color);
    }
    
    .comment-actions {
        text-align: right;
        margin-top: 0.5rem;
    }
    
    .reply-btn {
        background: transparent;
        color: var(--primary-color);
        border: none;
        cursor: pointer;
        font-size: 0.9rem;
        padding: 0.3rem 0.5rem;
        border-radius: 4px;
    }
    
    .reply-btn:hover {
        background-color: rgba(var(--primary-color-rgb, 52, 152, 219), 0.1);
    }
    
    /* 回复区域 */
    .replies-container {
        margin-top: 1rem;
        margin-left: 20px;
        padding-left: 15px;
        border-left: 2px solid var(--border-color);
        width: 100%;
        max-width: 100%;
    }
    
    .replies-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 8px;
    }
    
    .replies-count {
        font-size: 0.9em;
        color: var(--secondary-color);
    }
    
    .toggle-icon {
        color: var(--secondary-color);
        font-size: 12px;
        transition: transform 0.3s ease;
    }
    
    .replies-list {
        margin-top: 5px;
        padding-left: 10px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, opacity 0.3s ease;
        opacity: 0;
    }
    
    .replies-list.expanded {
        max-height: 1000px;
        opacity: 1;
    }
    
    .toggle-icon.expanded {
        transform: rotate(180deg);
    }
    
    .reply-item {
        margin-bottom: 10px;
        padding: 8px;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        width: calc(100% - 1rem);
    }
    
    .reply-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }
    
    .reply-meta {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    
    .reply-author {
        font-weight: bold;
        color: var(--text-color);
    }
    
    .reply-time {
        color: var(--secondary-color);
        font-size: 0.8em;
    }
    
    .reply-content {
        font-size: 0.95em;
        line-height: 1.5;
        word-break: break-word;
        width: 100%;
        max-width: 100%;
        color: var(--text-color);
    }
    
    /* 评论表单 */
    .terminal-card {
        background-color: var(--card-bg);
        backdrop-filter: blur(8px);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        box-shadow: var(--box-shadow);
        overflow: hidden;
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .terminal-header {
        background-color: var(--primary-color);
        padding: 10px 15px;
        display: flex;
        align-items: center;
    }
    
    .terminal-title {
        color: white;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .terminal-body {
        background-color: var(--card-bg);
        color: var(--text-color);
        padding: 15px;
        font-family: "Courier New", Courier, monospace;
        border-top: 1px solid var(--border-color);
    }
    
    .command-line {
        display: flex;
        align-items: flex-start;
    }
    
    .prompt {
        color: var(--primary-color);
        margin-right: 10px;
        padding-top: 5px;
        font-weight: bold;
    }
    
    .input-wrapper {
        position: relative;
        flex-grow: 1;
        font-size: 14px;
    }
    
    .terminal-textarea {
        background-color: transparent;
        border: none;
        color: var(--text-color);
        font-family: inherit;
        font-size: 14px;
        outline: none;
        width: 100%;
        min-height: 100px;
        resize: vertical;
        line-height: 1.5;
        padding-right: 12px;
    }
    
    .terminal-textarea::placeholder {
        color: var(--secondary-color);
    }
    
    .input-wrapper::after {
        content: "";
        position: absolute;
        right: 0;
        top: 12px;
        width: 8px;
        height: 15px;
        background-color: var(--primary-color);
        animation: blink 1s step-end infinite;
    }
    
    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
    }
    
    .terminal-actions {
        margin-top: 15px;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }
    
    .terminal-submit, .terminal-cancel {
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        padding: 8px 15px;
        font-family: "Courier New", Courier, monospace;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .terminal-submit:hover {
        background-color: var(--accent-color);
    }
    
    .terminal-cancel {
        background-color: var(--secondary-color);
    }
    
    .terminal-cancel:hover {
        background-color: var(--accent-color);
    }
    
    /* 侧边栏样式 */
    .sidebar {
        position: sticky;
        top: 2rem;
        height: fit-content;
        width: 100%;
        max-width: 300px;
    }
    
    .cover-card {
        border-radius: 8px;
        overflow: hidden;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        box-shadow: var(--box-shadow);
        margin-bottom: 1.5rem;
        width: 100%;
    }
    
    .cover-image {
        width: 100%;
        height: auto;
        max-height: 250px;
        object-fit: cover;
    }
    
    .cover-card-content {
        padding: 1rem;
        color: var(--text-color);
    }
    
    .cover-card-title {
        font-size: 0.9rem;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }
    
    .cover-card-text {
        font-size: 0.8rem;
        color: var(--secondary-color);
        line-height: 1.5;
    }
    
    /* 分页控制 */
    .pagination-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        gap: 10px;
    }
    
    .btn-page {
        background-color: transparent;
        color: #007bff;
        border: 1px solid #007bff;
        padding: 3px 10px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.85em;
        transition: all 0.2s ease;
    }
    
    .btn-page:hover:not(:disabled) {
        background-color: rgba(0, 123, 255, 0.1);
    }
    
    .btn-page:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        border-color: #6c757d;
        color: #6c757d;
    }
    
    .page-info {
        color: #6c757d;
        font-size: 0.9em;
    }
    
    /* 错误信息 */
    .error-message {
        color: #ff6b6b;
        font-size: 0.9rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    /* 响应式布局 */
    @media screen and (max-width: 900px) {
        .post-container {
            grid-template-columns: 1fr;
            padding: 0 1rem;
        }
        
        .sidebar {
            max-width: 100%;
            margin-bottom: 1.5rem;
            order: -1;
        }
        
        .cover-image {
            max-height: 200px;
        }
    }
    
    @media screen and (max-width: 600px) {
        .card-title {
            font-size: 1.2rem;
        }
        
        .comment-header, .reply-header {
            gap: 0.3rem;
        }
        
        .comment-author, .reply-author {
            font-size: 0.9rem;
        }
        
        .comment-date, .reply-date {
            font-size: 0.8rem;
        }
        
        /* 小屏幕上减小图标尺寸 */
        .icon, .terminal-icon, .post-rating svg {
            width: 1rem;
            height: 1rem;
        }
        
        .rating svg {
            width: 1.8rem;
            height: 1.8rem;
        }
        
        .post-container {
            padding: 0 0.5rem;
        }
    }
    
    @media screen and (max-width: 400px) {
        body {
            font-size: 14px;
        }
        
        .comment-item, .reply-item {
            padding: 0.4rem;
        }
        
        .terminal-card {
            padding: 0;
        }
        
        .terminal-header {
            padding: 5px 10px;
        }
        
        .terminal-body {
            padding: 10px;
        }
        
        /* 极小屏幕进一步缩小图标 */
        .icon, .terminal-icon, .post-rating svg {
            width: 0.9rem;
            height: 0.9rem;
        }
        
        .rating svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }
    
    /* 新增强制修复样式，用于确保白天模式文字可见 */
    @media (prefers-color-scheme: light), (data-theme: light) {
        .code-editor, .editor-content, .post-content, .comment-content, .reply-content {
            color: var(--text-color) !important;
        }
    }
    
    /* 修复夜间模式下的文字颜色问题 */
    html[data-theme='dark'] .post-content {
        color: var(--text-color) !important;
    }
    
    html[data-theme='dark'] .editor-content {
        color: var(--text-color) !important;
    }
    
    /* 移动端响应式调整 */
    @media screen and (max-width: 767px) {
        /* 优化移动端评分组件 */
        .rating-container {
            padding: 1rem 0;
        }
        
        .rating-title {
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }
        
        .rating {
            gap: 0.1rem;
            justify-content: center;
            margin-bottom: 0.5rem;
        }
        
        .rating svg {
            width: 1.8rem;
            height: 1.8rem;
        }
        
        .rating label {
            padding: 6px;
        }
        
        .rating-submit-btn {
            padding: 8px 16px;
            margin: 0 auto;
            display: block;
        }
        
        .rating-form-title {
            text-align: center;
            margin-bottom: 0.8rem;
        }
    }
    
    /* 超小屏幕设备的额外调整 */
    @media screen and (max-width: 360px) {
        .rating svg {
            width: 1.5rem;
            height: 1.5rem;
        }
        
        .rating {
            gap: 0;
        }
        
        .rating-info {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .post-rating {
            margin-right: 0;
            margin-bottom: 0.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="post-container">
    <!-- 左侧文章内容 -->
    <div class="code-editor">
        <div class="header">
            <span class="title">{{ post.title }}</span>
            <a href="{{ url_for('index') }}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon">
                    <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
                    <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g>
                    <g id="SVGRepo_iconCarrier">
                        <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M6 6L18 18"></path>
                        <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M18 6L6 18"></path>
                    </g>
                </svg>
            </a>
        </div>
        <div class="editor-content">
            <div class="post-meta">
                <div class="post-meta-item">
                    <span class="post-meta-label">作者:</span> {{ post.author.username }}
                </div>
                <div class="post-meta-item">
                    <span class="post-meta-label">发布时间:</span> {{ post.created_at.strftime('%Y-%m-%d %H:%M') }}
                </div>
                {% if post.rating_count > 0 %}
                <div class="post-meta-item">
                    <span class="post-meta-label">评分:</span>
                    <span>{{ post.average_rating|round(1) }} / 5</span>
                    <span>({{ post.rating_count }}人评价)</span>
                </div>
                {% endif %}
                {% if post.tags %}
                <div class="post-tags">
                    <span class="post-meta-label">标签:</span>
                    {% for tag in post.tags %}
                        <span class="tag">{{ tag.name }}</span>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            <div class="post-content">
                {{ content_html | safe }}
            </div>
            
            <!-- 评分部分 -->
            <div class="rating-container">
                <h3 class="rating-title">文章评分</h3>
                
                <div class="rating-info">
                    {% if post.rating_count > 0 %}
                    <div class="post-rating">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path>
                        </svg>
                        <span>{{ post.average_rating|round(1) }} / 5</span>
                        <span>({{ post.rating_count }}人评价)</span>
                    </div>
                    {% else %}
                    <div class="post-rating">
                        <span>暂无评分</span>
                    </div>
                    {% endif %}
                </div>
                
                {% if current_user.is_authenticated %}
                    <div class="rating-form">
                        <p class="rating-form-title">给这篇文章评分：</p>
                        <form action="{{ url_for('rate_post', post_id=post.id) }}" method="post">
                            <div class="rating">
                                <input type="radio" id="star-5" name="rating" value="5" {% if user_rating == 5 %}checked{% endif %}>
                                <label for="star-5" aria-label="5星">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
                                </label>
                                <input type="radio" id="star-4" name="rating" value="4" {% if user_rating == 4 %}checked{% endif %}>
                                <label for="star-4" aria-label="4星">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
                                </label>
                                <input type="radio" id="star-3" name="rating" value="3" {% if user_rating == 3 %}checked{% endif %}>
                                <label for="star-3" aria-label="3星">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
                                </label>
                                <input type="radio" id="star-2" name="rating" value="2" {% if user_rating == 2 %}checked{% endif %}>
                                <label for="star-2" aria-label="2星">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
                                </label>
                                <input type="radio" id="star-1" name="rating" value="1" {% if user_rating == 1 %}checked{% endif %}>
                                <label for="star-1" aria-label="1星">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
                                </label>
                            </div>
                            <button type="submit" class="rating-submit-btn">提交评分</button>
                        </form>
                        {% if user_rating %}
                            <p style="color: #78cc6d; margin-top: 0.5rem; font-size: 0.9rem; text-align: center;">
                                您已评价过此文章，可以重新评价修改您的评分。
                            </p>
                        {% endif %}
                    </div>
                {% else %}
                    <div class="login-to-rate" style="text-align: center;">
                        请 <a href="{{ url_for('login') }}">登录</a> 后评分。
                    </div>
                {% endif %}
            </div>
            
            <!-- 评论部分 -->
            <div class="comments-container">
                <h3 class="comments-title">评论区</h3>
                
                <!-- 评论列表 -->
                <div class="comments-list">
                    {% if comments %}
                        {% for comment in comments %}
                            <div class="comment-item">
                                <div class="comment-header">
                                    <div class="comment-meta">
                                        <span class="comment-author">{{ comment.user.username }}</span>
                                        <span class="comment-time">{{ comment.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                                    </div>
                                </div>
                                <div class="comment-content">{{ comment.content }}</div>
                                
                                <!-- 回复按钮 - 修复onclick事件 -->
                                {% if current_user.is_authenticated %}
                                <div class="comment-actions">
                                    <button class="reply-btn" onclick="showReplyForm('{{ comment.id }}')">回复</button>
                                </div>
                                {% endif %}
                                
                                <!-- 回复表单 -->
                                <div id="reply-form-{{ comment.id }}" class="reply-form-container" style="display: none;">
                                    <form action="{{ url_for('reply', post_id=post.id, comment_id=comment.id) }}" method="post">
                                        <div class="terminal-card">
                                            <div class="terminal-header">
                                                <div class="terminal-title">
                                                    <svg viewBox="0 0 20 20" fill="currentColor" class="terminal-icon">
                                                        <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                                    </svg>
                                                    <span>回复评论</span>
                                                </div>
                                            </div>
                                            <div class="terminal-body">
                                                <div class="command-line">
                                                    <span class="prompt">reply></span>
                                                    <div class="input-wrapper">
                                                        <textarea name="content" class="terminal-textarea" rows="3" required></textarea>
                                                    </div>
                                                </div>
                                                <div class="terminal-actions">
                                                    <button type="submit" class="terminal-submit">发送</button>
                                                    <button type="button" class="terminal-cancel" onclick="hideReplyForm('{{ comment.id }}')">取消</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                
                                <!-- 回复列表 - 修复onclick事件 -->
                                {% if comment.replies %}
                                <div class="replies-container">
                                    <div class="replies-header" onclick="toggleReplies('{{ comment.id }}')">
                                        <span class="replies-count">{{ comment.replies|length }} 条回复</span>
                                        <span id="toggle-icon-{{ comment.id }}" class="toggle-icon">▼</span>
                                    </div>
                                    <div id="replies-list-{{ comment.id }}" class="replies-list">
                                        <div id="visible-replies-{{ comment.id }}" class="visible-replies" 
                                             data-total-count="{{ comment.replies|length }}"
                                             data-current-page="1"
                                             data-page-size="5">
                                            {% for reply in comment.replies[:5] %}
                                            <div class="reply-item">
                                                <div class="reply-header">
                                                    <div class="reply-meta">
                                                        <span class="reply-author">{{ reply.user.username }}</span>
                                                        <span class="reply-time">{{ reply.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                                                    </div>
                                                </div>
                                                <div class="reply-content">{{ reply.content }}</div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                        {% if comment.replies|length > 5 %}
                                        <div class="pagination-controls">
                                            <button class="btn-page" onclick="changePage('{{ comment.id }}', 'prev')" disabled>&laquo; 上一页</button>
                                            <span class="page-info" id="page-info-{{ comment.id }}">1 / {{ ((comment.replies|length) / 5)|round(0, 'ceil')|int }}</span>
                                            <button class="btn-page" onclick="changePage('{{ comment.id }}', 'next')">下一页 &raquo;</button>
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        {% endfor %}
                    {% else %}
                        <p class="no-comments">暂无评论，快来发表第一条评论吧！</p>
                    {% endif %}
                </div>
                
                <!-- 发表评论表单 -->
                {% if comment_enabled %}
                    <div class="terminal-card">
                        <div class="terminal-header">
                            <span class="terminal-title">
                                <svg class="terminal-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M4 17l6-6-6-6M12 19h8"></path>
                                </svg>
                                云水禅心居评论终端
                            </span>
                        </div>
                        <div class="terminal-body">
                            <form action="{{ url_for('add_comment', post_id=post.id) }}" method="post" class="comment-form">
                                {{ form.hidden_tag() }}
                                <div class="command-line">
                                    <span class="prompt">comment></span>
                                    <div class="input-wrapper">
                                        {{ form.content(class="terminal-textarea", placeholder="在这里输入您的评论...", rows="4") }}
                                    </div>
                                </div>
                                {% for error in form.content.errors %}
                                    <span class="error-message">{{ error }}</span>
                                {% endfor %}
                                <button type="submit" class="terminal-submit">提交评论</button>
                            </form>
                        </div>
                    </div>
                {% else %}
                    <div class="login-to-comment">
                        请 <a href="{{ url_for('login') }}">登录</a> 后发表评论。
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- 右侧封面图片卡片 -->
    <div class="sidebar">
        <div class="cover-card">
            {% if post.cover_image %}
                <img src="{{ url_for('static', filename=post.cover_image) }}" alt="{{ post.title }}" class="cover-image">
            {% else %}
                <img src="{{ url_for('static', filename='img/default-cover.jpg') }}" alt="默认封面" class="cover-image">
            {% endif %}
            <div class="cover-card-content">
                <div class="cover-card-title">{{ post.title }}</div>
                <div class="cover-card-text">由 {{ post.author.username }} 发布于 {{ post.created_at.strftime('%Y-%m-%d') }}</div>
            </div>
        </div>
        
        <!-- 可以在这里添加其他卡片，如相关文章推荐等 -->
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- 确保样式正确应用 -->
<script>
    // 防御性CSS加载检查
    document.addEventListener('DOMContentLoaded', function() {
        // 检查CSS是否正确应用
        function checkStylesApplied() {
            var testElement = document.querySelector('.code-editor');
            if (testElement) {
                var styles = window.getComputedStyle(testElement);
                // 检查背景色是否正确应用
                if (styles.backgroundColor === 'rgba(0, 0, 0, 0)' || styles.backgroundColor === 'transparent') {
                    console.warn('样式未正确应用，自动重新应用样式...');
                    reapplyStyles();
                }
            }
        }
        
        // 重新应用关键样式
        function reapplyStyles() {
            var styleEl = document.createElement('style');
            var isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
            
            // 根据主题模式设置不同的样式
            if (isDarkMode) {
                // 夜间模式样式
                styleEl.textContent = `
                    .code-editor {
                        width: 100% !important;
                        background-color: #1d1e22 !important;
                        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5) !important;
                        border-radius: 8px !important;
                        padding: 2px !important;
                        margin-bottom: 1rem !important;
                        overflow: hidden !important;
                    }
                    
                    .header {
                        display: flex !important;
                        align-items: center !important;
                        justify-content: space-between !important;
                        margin: 10px !important;
                        padding-bottom: 8px !important;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
                    }
                    
                    .title {
                        font-weight: 900 !important;
                        font-size: 16px !important;
                        color: #e0e0e0 !important;
                    }
                    
                    .editor-content {
                        margin: 0 15px 15px !important;
                        color: #e0e0e0 !important;
                    }
                    
                    .post-content {
                        line-height: 1.8 !important;
                        color: #e0e0e0 !important;
                    }
                    
                    .comment-content, .reply-content {
                        color: #e0e0e0 !important;
                    }
                `;
            } else {
                // 日间模式样式
                styleEl.textContent = `
                    .code-editor {
                        width: 100% !important;
                        background-color: white !important;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
                        border: 1px solid #eee !important;
                        border-radius: 8px !important;
                        padding: 2px !important;
                        margin-bottom: 1rem !important;
                        overflow: hidden !important;
                    }
                    
                    .header {
                        display: flex !important;
                        align-items: center !important;
                        justify-content: space-between !important;
                        margin: 10px !important;
                        padding-bottom: 8px !important;
                        border-bottom: 1px solid #eee !important;
                    }
                    
                    .title {
                        font-weight: 900 !important;
                        font-size: 16px !important;
                        color: #333 !important;
                    }
                    
                    .editor-content {
                        margin: 0 15px 15px !important;
                        color: #333 !important;
                    }
                    
                    .post-content {
                        line-height: 1.8 !important;
                        color: #333 !important;
                    }
                    
                    .comment-content, .reply-content {
                        color: #333 !important;
                    }
                    
                    .post-meta {
                        color: #7f8c8d !important;
                    }
                    
                    .post-meta-label {
                        color: #3498db !important;
                    }
                    
                    .terminal-textarea {
                        color: #333 !important;
                    }
                `;
            }
            document.head.appendChild(styleEl);
        }
        
        // 页面加载后自动检查样式，无需用户确认
        setTimeout(checkStylesApplied, 500);
        
        // 再次自动检查样式（备份检查）
        setTimeout(checkStylesApplied, 2000);
    });

    // 显示回复表单
    function showReplyForm(commentId) {
        // 先隐藏所有回复表单
        document.querySelectorAll('.reply-form-container').forEach(function(form) {
            form.style.display = 'none';
        });
        
        // 显示当前回复表单
        var formElement = document.getElementById('reply-form-' + commentId);
        if (formElement) {
            formElement.style.display = 'block';
            
            // 聚焦到文本框
            var textarea = formElement.querySelector('textarea');
            if (textarea) textarea.focus();
            
            // 在移动设备上滚动到回复表单
            if (window.innerWidth <= 480) {
                setTimeout(function() {
                    formElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
            }
        }
    }
    
    // 隐藏回复表单
    function hideReplyForm(commentId) {
        var formElement = document.getElementById('reply-form-' + commentId);
        if (formElement) {
            formElement.style.display = 'none';
        }
    }

    // 切换回复列表的显示状态
    function toggleReplies(commentId) {
        var repliesList = document.getElementById('replies-list-' + commentId);
        var toggleIcon = document.getElementById('toggle-icon-' + commentId);
        
        if (repliesList && toggleIcon) {
            if (!repliesList.classList.contains('expanded')) {
                // 展开
                repliesList.classList.add('expanded');
                toggleIcon.classList.add('expanded');
                toggleIcon.textContent = '▲';
            } else {
                // 收起
                repliesList.classList.remove('expanded');
                toggleIcon.classList.remove('expanded');
                toggleIcon.textContent = '▼';
            }
        }
    }

    // 切换到指定页面
    function changePage(commentId, direction) {
        var visibleReplies = document.getElementById('visible-replies-' + commentId);
        var pageInfo = document.getElementById('page-info-' + commentId);
        
        if (visibleReplies && pageInfo) {
            var prevButton = pageInfo.previousElementSibling;
            var nextButton = pageInfo.nextElementSibling;
            
            // 获取当前页码和总页数
            var currentPage = parseInt(visibleReplies.getAttribute('data-current-page') || '1');
            var pageSize = parseInt(visibleReplies.getAttribute('data-page-size') || '5');
            var totalReplies = parseInt(visibleReplies.getAttribute('data-total-count') || '0');
            var totalPages = Math.ceil(totalReplies / pageSize);
            
            // 根据方向计算新页码
            if (direction === 'prev' && currentPage > 1) {
                currentPage--;
            } else if (direction === 'next' && currentPage < totalPages) {
                currentPage++;
            }
            
            // 更新页码信息
            visibleReplies.setAttribute('data-current-page', currentPage);
            pageInfo.textContent = currentPage + ' / ' + totalPages;
            
            // 更新按钮状态
            if (prevButton) prevButton.disabled = (currentPage === 1);
            if (nextButton) nextButton.disabled = (currentPage === totalPages);
            
            // 计算开始索引
            var startIndex = (currentPage - 1) * pageSize;
            
            // 显示加载指示器
            visibleReplies.innerHTML = '<div class="loading">加载中...</div>';
            
            // 获取该页的回复
            fetch('/get_replies/' + commentId + '?start=' + startIndex + '&count=' + pageSize)
                .then(function(response) { return response.json(); })
                .then(function(data) {
                    if (data.success) {
                        // 清空现有回复并添加新回复
                        visibleReplies.innerHTML = '';
                        
                        // 渲染回复
                        data.replies.forEach(function(reply) {
                            var replyElem = document.createElement('div');
                            replyElem.className = 'reply-item';
                            replyElem.innerHTML = 
                                '<div class="reply-header">' +
                                    '<div class="reply-meta">' +
                                        '<span class="reply-author">' + reply.username + '</span>' +
                                        '<span class="reply-time">' + reply.created_at + '</span>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="reply-content">' + reply.content + '</div>';
                            visibleReplies.appendChild(replyElem);
                        });
                        
                        // 如果没有回复
                        if (data.replies.length === 0) {
                            visibleReplies.innerHTML = '<div class="no-replies">没有回复</div>';
                        }
                    } else {
                        visibleReplies.innerHTML = '<div class="error">加载失败</div>';
                    }
                })
                .catch(function(error) {
                    console.error('加载回复失败:', error);
                    visibleReplies.innerHTML = '<div class="error">加载失败，请重试</div>';
                });
        }
    }
    
    // 监听屏幕方向变化，重新调整视口比例
    function handleOrientationChange() {
        // 仅在移动设备上处理方向变化
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            // 获取当前viewport设置
            var metaViewport = document.querySelector('meta[name="viewport"]');
            
            // 根据屏幕宽度设置不同的缩放比例
            var width = window.innerWidth;
            var scale = 1.0;
            
            if (width <= 320) {
                scale = 0.8; // 超小屏幕
            } else if (width <= 375) {
                scale = 0.9; // 小屏幕
            } else if (width <= 414) {
                scale = 0.95; // 中等小屏幕
            }
            
            // 更新视口设置
            metaViewport.content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=5.0, minimum-scale=' + scale + ', user-scalable=yes';
            document.documentElement.style.setProperty('--initial-scale', scale);
            
            // 优化横屏模式
            if (window.innerWidth > window.innerHeight) {
                // 横屏模式
                document.body.classList.add('landscape-mode');
            } else {
                // 竖屏模式
                document.body.classList.remove('landscape-mode');
            }
            
            // 强制设置宽度为视口宽度
            document.body.style.width = "100%";
            document.body.style.maxWidth = "100vw";
            document.body.style.overflowX = "hidden";
            
            // 修复一些可能的宽度问题
            var containers = document.querySelectorAll('.post-container, .code-editor, .editor-content, .sidebar');
            containers.forEach(function(container) {
                container.style.width = "100%";
                container.style.maxWidth = "100%";
                container.style.boxSizing = "border-box";
            });
        }
    }
    
    // 页面加载后初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 确保所有回复列表初始是折叠的
        document.querySelectorAll('.replies-list').forEach(function(list) {
            if (list.classList.contains('expanded')) {
                list.classList.remove('expanded');
            }
        });
        
        // 初始化所有页码按钮状态
        document.querySelectorAll('.visible-replies').forEach(function(container) {
            var commentId = container.id.split('-').pop();
            var pageInfo = document.getElementById('page-info-' + commentId);
            
            if (pageInfo) {
                var prevButton = pageInfo.previousElementSibling;
                if (prevButton) prevButton.disabled = true; // 初始页始终是第一页
            }
        });
        
        // 监听屏幕方向变化
        window.addEventListener('orientationchange', handleOrientationChange);
        window.addEventListener('resize', function() {
            // 使用防抖函数处理resize事件
            clearTimeout(window.resizeTimer);
            window.resizeTimer = setTimeout(handleOrientationChange, 250);
        });
        
        // 初始调用一次
        handleOrientationChange();
    });
</script>
{% endblock %} 